<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Asset Management</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<small>small font</small>
<!-- <audio> 定义音频内容 -->
<audio controls="controls" loop="loop" preload="auto">
    <source src="./src/asset/test.mp3" type="audio/mp3">
    您的浏览器不支持 audio 元素。
</audio>
<!-- <video> 定义视频内容 -->
<video width="320" height="420" controls="controls" loop="loop"
       preload="auto" title="video Title" draggable="false">
    <source src="./src/asset/test.mp3" type="video/mp4">
    <track label="English" src="./src/asset/awsome.vtt" kind="metadata" srclang="en" default>
    您的浏览器不支持video元素。
</video>
<article>
    <h1>独立内容</h1>
    <p>与上下文不相关</p>
</article>
<aside>
    <h4>Epcot Center</h4>
    <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
<section>
    <h1>html</h1>
    <p>section content</p>
</section>
<p>今天别忘了买
    <mark>牛奶</mark>
    。
</p>
<meter value="4" min="0" max="10">4 out of 10</meter>
<br>
<meter value="0.7">70%</meter>
<nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/javascript/">JavaScript</a>
    <a href="/jquery/">jQuery</a>
</nav>
<progress value="22" max="100"></progress>
<p>我们在每天上午
    <time>9:00</time>
    开始营业。
</p>
<p>情人们会在
    <time datetime="2018-02-14">情人节</time>
    约会。
</p>
<p>我们在每天早上
    <time>9:00</time>
    开始营业。
</p>
<p>我在
    <time datetime="2017-02-14">情人节</time>
    有个约会。
</p>
<p><strong>注意：</strong>Internet Explorer 8 及更早版本不支持 time 标签。</p>
<form action="/statics/demosource/demo-form.php" method="get">
    <div>
        <label>
            123
        </label>
        <label>
            <input id="1" list="browsers">
        </label>
    </div>
    <div>
        <label>
            测试测试123
        </label>
        <label>
            <input id="2" list="browsers">
        </label>
    </div>
    <!-- <datalist> 新表单元素 需要与<input>配合使用，用于表示可选的列表，与html中的select功能一样 -->
    <datalist id="browsers"> 
        <option value="Internet Explorer"> 
        <option value="Firefox"> 
        <option value="Chrome">   
        <option value="Opera">   
        <option value="Safari"> 
    </datalist>
</form>

<dl>
    <dt>Coffee</dt>
    <dt>Coffee1</dt>
    <dt>Coffee2</dt>
    <dd>Black hot drink</dd>
    <dd>Black cool drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

<!-- 在没有css的情况下，html自定义结构 -->

<header>前端遥遥路</header>
<nav>
    <ul>
        <li>Html</li>
        <li>Css</li>
        <li>JavaScript</li>
    </ul>
</nav>
<section id="第一小节">
    <header>小标题 Html</header>
    <article>HTML5 是下一代的 HTML。 本教程向您讲解 HTML5 中的新特性。每一章中的实例 通过我们的 HTML 编辑器,您能够编辑 HTML,然后点击按钮来查看结果。</article>
</section>
<section id="第二小节">
    <header>小标题 Css</header>
    <article>在我们的 CSS 教程中,您会学到如何使用 CSS 同时控制多重网页的样式和布局。 开始学习 CSS!CSS 实例 学习70 个实例。</article>
</section>
<section id="第三小节">
    <header>小标题 Script</header>
    <article>JavaScript 是属于网络的脚本语言! JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。</article>
</section>
<aside>广告位招租！！！18511111111</aside>
<footer>Copy Right TooT™</footer>

<script type="text/javascript">
    const c = document.getElementById("myCanvas");
    const cxt = c.getContext("2d");
    cxt.fillStyle = "#FF0000";
    cxt.fillRect(0, 0, 150, 75);
</script>

</body>
</html>